@import "~common/styles/reset.scss";
@import "~common/styles/variables.scss";
@import "~common/styles/utils.scss";

// 美化滚动条
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
  background-color:#f8f8f8;
}
::-webkit-scrollbar {//滚动条的宽度
  width:9px;
  height:9px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
  background-color:#dddddd;
  background-clip:padding-box;
  min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
  background-color:#2d6db3;;
}

html {
  position: relative;
  background: #f0f2f5;
  height: 100%;
}

body {
  color:#333;
  font-family: "Microsoft YaHei", sans-serif;
  height: 100%;
  font-size: 0.14rem;
}

h3 {
  font-size: 18px;
}

//  修复 导致 vue-image-crop-upload 出现bug 的样式
.vicp-wrap img {
  max-width: none;
}

.el-button--mini {
  font-size: 0.12rem;
  padding: 0.07rem 0.15rem;
}

.el-button--small {
  padding: 0.09rem 0.15rem;
  font-size: 0.12rem;
  border-radius: 0.03rem;
}

.user__pagination{
  margin-top: 10px;
}

.content {
  margin: 0 auto;

  .content__searchbar__wrapper {
    margin: 0.1rem 0;
  }

  width: 100%;
  padding: 0.2rem 0;

  @media screen and (min-width: 1300px) {
    padding: 0.1rem 0.2rem;
  }

  box-sizing: border-box;

  .content__main {
    margin-bottom: .3rem;

    .one-main {
      position: relative;
      padding: 0.2rem;
      border-radius: 10px;
      background: $--color-level15;
      min-height: 600px;
      text-align: left;
      &.has__pagination{
        padding-bottom: 50px;
      }
    }

    .content__searchbar__wrapper {
      padding: 0.1rem 0 0 0.2rem;
      text-align: left;
    }

    h1.content__panel__title {
      color: $--color-primary;
      font-weight: bold;
      text-align: left;
      font-size: 20px;
      line-height: 20px;
      padding: 0 10px 10px 0;
      border-bottom: 1px solid $--color-level13;
    }

    .main {
      position: relative;
      padding: 0.2rem;
      text-align: left;
      border-radius: 10px;
      background: $--color-level15;
      margin-right: 250px;
      min-height: 600px;
      &.has__pagination{
        padding-bottom: 50px;
      }
      @media screen and (max-width: 960px) {
        margin-right: 0;
      }

      svg {
        padding-left: 10px;
        width: 14px;
        vertical-align: 0;
        height: 14px;
      }
    }

    .user__pagination{
      position: absolute;
      width: 100%;
      bottom: 5px;
    }

    .main__section {
      text-align: left;
      h3{
        color: $--color-primary;
        font-size: 16px;
        font-weight: bold;
      }
      border-top: 1px solid $--color-level14;
      padding: 0.1rem 0 0.2rem 0;

      .copyBtn {
        padding: 0 0.1rem;
        cursor: pointer;
        margin-left: 5px;
        display: inline-block;
        color: $--color-level15;
        line-height: 20px;
        font-size: 0.14rem;
        background: $--color-green-deep;
      }
    }

    .siderbar {
      float: right;
      position: relative;
      border-radius: 10px;
      text-align: left;
      min-height: 600px;
      width: 240px;
      background: $--color-level15;
      box-sizing: border-box;
      padding: 0.1rem;

      @media screen and (max-width: 960px) {
        min-height: 400px;
        width: 100%;
        float: none;
        padding: 0.1rem 0.2rem;
        margin-bottom: 0.1rem;
      }

      ul.siderbar__item__list {
        color: #999;
        .header {
          padding: 0.1rem 0 0.1rem 0;
          border-bottom: 0;
          background-color: transparent;
          color: $--color-level3;
        }

        .section__title {
          color:$--color-primary;
          font-size: 16px;
          padding: 5px 0;
          margin-bottom: 10px;
        }

        & > li {
          &:not(:last-child) {
            border-bottom: 1px solid $--color-level13;
          }

          padding: 0.1rem 0;
        }
      }

      ul.button-list {
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;

        li {
          padding: 0.05rem 0.03rem;
          flex: 0 1 auto;
        }
      }

      .button__wrapper {
        text-align: center;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        &>*{
          margin-left: 10px;
        }
      }
    }
  }
}

#nprogress .bar {
  background: $--color-blue !important;
}

.auth__dialog__wrapper {
  border-radius: 10px;

  .el-dialog__body {
    padding-top: 0 !important;
  }
}

.text-muted {
  color: #bcbec3 !important;
}

.post__box__wrapper {
  margin-top: 10px;
  min-height: 100px;
  text-align: left;
  background: $--color-level15;
}

.el-table {
  font-size: 0.14rem;
}

.el-textarea.is-disabled .el-textarea__inner {
  cursor: text !important;
}

.m__svg {
  width: 25px !important;
  height: 25px !important;
}

.clipboard__btn{
  cursor: pointer;
  padding: 4px;
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  border-radius: 3px;
  text-align: center;
  &:hover{
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}